<template>
	<div class="KcAudit w944">
		<div class="label_top">
			<p><i class="line"></i>课程审核</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<a class="listTwo" @click="importDaoChu()">导出数据</a>
				<el-select v-model="rootcompanyid" placeholder="请选择平台" class="th_4" @change="getRootCompanyId" v-show="identityShow">
					<el-option v-for="item in platformOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-select v-model="audit" placeholder="请选择审核状态" class="th_3">
					<el-option v-for="item in auditArr" :key="item.id" :label="item.name" :value="item.name"></el-option>
				</el-select>
				<el-cascader v-model="searchSelect" :options="options" :props="optionProps" :show-all-levels='false' filterable placeholder="请选择课程分类" class="th_2"></el-cascader>
				<div class="msearch">
					<input placeholder="请输入课程标题或讲师名字..." v-model="search"/>
					<a @click="getKcCourseList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="courseName" label="课程名称" width="300"></el-table-column>
				<el-table-column prop="rootcompanyname" label="平台" width="120"></el-table-column>
				<el-table-column prop="nickname" label="讲师"></el-table-column>
				<el-table-column prop="columnNameYi" label="一级分类"></el-table-column>
				<el-table-column prop="columnNameEr" label="子分类"></el-table-column>
				<el-table-column label="审核小组">
					<template slot-scope="scope">
						<el-button size="mini" @click="auditGroup(scope.row)">{{scope.row.name}}</el-button>
					</template>
				</el-table-column>
				<el-table-column label="内容预览">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleSeen(scope.row)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column label="审核状态">
					<template slot-scope="scope">
						<el-button size="mini" v-if="scope.row.auditState==0">待审核</el-button>
						<span v-if="scope.row.auditState==2">已拒绝<img src="../../assets/qudaoImg/refuse.png"></span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160">
					<template slot-scope="scope">
						<div v-if="scope.row.auditState==0">
							<el-button size="mini" @click="handlePass(scope.row)" style="color:#44CEF6">通过</el-button>
							<el-button size="mini" @click="handleRefuse(scope.row)" style="color:#0083E2">拒绝</el-button>
							<el-button size="mini" @click="handleDelete(scope.row)" style="color:#FF2D51">删除</el-button>
						</div>
						<div v-if="scope.row.auditState==2">
							<el-button size="mini" @click="handlePass(scope.row)" style="color:#44CEF6">通过</el-button>
							<el-button size="mini" @click="handleDelete(scope.row)" style="color:#FF2D51">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 30px">
				<el-button @click="toggleSelection(tableData)" style="color:#333;font-size: 14px;">全选</el-button>
				<el-button @click="handleDeleteAll()" style="font-size: 14px;color:#FF2D51;margin: 0;">批量删除</el-button>
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
			<!--状态弹窗-->
			<div class="stateWrap" v-show="wrapClose">
				<a @click="stateWrapClose()">x</a>
				<p>{{stateWrapText}}</p>
			</div>
			<!--失败状态弹窗-->
			<div class="stateWrapSecond" v-show="wrapCloseSecond">
				<a @click="stateWrapCloseSecond()">x</a>
				<p>{{stateWrapTextSecond}}</p>
			</div>
			<!--删除前弹窗-->
			<div class="beforeDelete" v-show="deleteStatus">
				<p>是否确认删除？</p>
				<div class="delBtn">
					<a @click="deleteSubmit">确定</a>
					<a @click="deleteCancel">取消</a>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				KcAudit:'',
				rootcompanyid:'',
				platformOptions:[],
				identity:'',
				identityShow:true,
				nickname: '',
				search:'',
				level:'',
				optionLevel:[],
				searchSelect: [],
				courseColumnYi:'',
				filterable: true,
				tableData: [],
				loading: true,
				//分页设置
		        pagesize: 15,
		        currentpage: 1,
		        total: 1,
				//分页设置end
				wrapClose:false,
				stateWrapText:'',
				wrapCloseSecond: false,
				stateWrapTextSecond:'',
				nowType:'delete',
				deleteStatus:false,
				// 列表全选与否
				allSelect: false,
				multipleSelection: [],
				options: [],
				optionProps: {
                    value: 'id',
                    label: 'columnName',
                    children: 'childList'
                },
				audit:'',
				auditArr:[{
					id:0,
					name:'待审核'
				},{
					id:2,
					name:'拒绝'
				}]
			}
		},
		methods: {
			getKcCourseList(){
				var s={
				    page: this.currentpage,
					num: this.pagesize,
					rootcompanyid:this.rootcompanyid,
					auditState:this.audit,
					fuzzyFields: this.search,
					courseType:1
                };
				if(this.searchSelect!=null && this.searchSelect.length >= 2){
                	s.courseColumnYi = this.searchSelect[0];
					s.courseColumn = this.searchSelect[1];
                };
				this.$ajax({ 
					url: this.$root.jifuUrl + "/mns/kcCourse/selectAuditKcCourseList",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: s,
					success: res => {
						console.log(res);
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			handleSeen(row) {
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/kcCourse/getCourseDetails",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {id:row.id},
					success: res => {
						if(res.data.code == 200) {
							this.$router.push({
								name: 'addsub',
								params: {
									type: 'seen'
								}
							})
							this.$root.managerMsg = res.data.data;
							console.log('102',this.$root.managerMsg)
						}else{
							console.log("获取详细信息失败")
						}
					}
				});
			},
			handlePass(row){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/kcCourse/updateKcCourseByAuditstate",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {
						id:row.id,
						auditState:1
					},
					success: res => {
						if(res.data.code == 200) {
							this.wrapClose = true;
							this.stateWrapText = '操作成功';
							setTimeout(() =>{
								this.$router.go(0);
							},2000) 
						}else{
							this.wrapCloseSecond = true;
							this.stateWrapTextSecond = res.data.message;	
						}
					}
				});
			},
			handlecomments(index, row) {
				this.$router.push({
					name: 'addcomment',
					params: {
						courseId: row.id,
						courseName:row.courseName
					}
				})
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				for(var i = 0;i<val.length;i++){
					var s={"id":val[i].id}
					this.multipleSelection.push(s)
				}
			},
			handleDelete(index, row){
				this.deleteStatus = true;
				this.transitionRow = row;
			},
			// 批量删除
			handleDeleteAll() {
				this.nowType = 'Batch';
				if(this.multipleSelection.length==0){
					this.wrapCloseSecond = true;
					this.stateWrapTextSecond = '批量选择为空';
				}else{
					this.deleteStatus = true;
				}
			},
			deleteSubmit() {
				if(this.nowType == 'delete'){
					var list = [];
					list.push({
						id:this.transitionRow.id
					});
					this.$ajax({ 
						url: this.$root.jifuUrl + "/mns/kcCourse/deleteKcCourseState",
						data:list,
						method: 'DELETE',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						success: res => {
							if (res.data.code == 200) {
								this.deleteStatus = false;
								this.wrapClose = true;
								this.stateWrapText = '删除成功'	
								setTimeout(() =>{
									this.$router.go(0);
								},2000)
							}else{
								this.deleteStatus = false;
								this.wrapCloseSecond = true;
								this.stateWrapTextSecond = res.data.message;	
							}
						}
					});
				}else{
					this.$ajax({ 
						url: this.$root.jifuUrl + "/mns/kcCourse/deleteKcCourseState",
						data:this.multipleSelection,
						method: 'DELETE',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						success: res => {
							if (res.data.code == 200) {
								this.deleteStatus = false;
								this.wrapClose = true;
								this.stateWrapText = '删除成功'	
								setTimeout(() =>{
									this.$router.go(0);
								},2000)
							}else{
								this.deleteStatus = false;
								this.wrapCloseSecond = true;
								this.stateWrapTextSecond = res.data.message;	
							}
						}
					});
				}
			},
			deleteCancel(){
				this.deleteStatus = false;
				this.nowType = 'delete';
			},
			getRootCompanyId(){
				this.getxlkKcColumn();
				this.attitude();
			},
			getxlkKcColumn() {
				//获取下拉框数据
				if(this.$root.userInfoMsg.rootcompanyid == 0){
					this.identity = this.rootcompanyid
				}else{
					this.identity = ""
				};
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/kcColumn/xialakuangKcColumnForfenlei",
					method: 'POST',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data:{columntypeVirtual:1,rootcompanyid:this.identity},
					success: res => {
						if(res.data.code == 200) {
							this.options=this.getTreeData(res.data.data);
						}else{
							this.wrapClose = true; 
							this.stateWrapText = res.data	
						}
					}
				});
			},
			// 递归方法去掉childList为[]的数据
			getTreeData(data){
			// 循环遍历json数据
				for(var i=0;i<data.length;i++){
					if(data[i].childList.length<1){
					// children若为空数组，则将childList设为undefined
						data[i].childList=undefined;
					}else {
					// children若不为空数组，则继续 递归调用 本方法
						this.getTreeData(data[i].childList);
					}
				}
				return data;
        	},
//			观看权限
			attitude() {
				if(this.$root.userInfoMsg.rootcompanyid == 0){
					this.identity = this.rootcompanyid
				}else{
					this.identity = ""
				};
                this.$ajax({
                    url: this.$root.jifuUrl + "/getLabelByType?"+'type=4'+'&rootcompanyid='+this.identity,
                    method: 'GET',
                    data: {},
                    success: res => {
                        if(res.data.code == 200) {
							this.optionLevel = res.data.data;
                        }
                    }
                });
            },
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getKcCourseList();
			},
			stateWrapClose(){
				this.wrapClose = !this.wrapClose;
				this.$router.go(0);
			},
			stateWrapCloseSecond() {//失败弹窗
				this.wrapCloseSecond = !this.wrapCloseSecond;
			},
			goaddsub() {
				this.$router.push({
					path: '/addsub'
				})
			},
			//平台属性
			platformAttritude() {
                this.$ajax({
                    url: this.$root.platformUrl,
                    method: 'GET',
                    data: {},
                    success: res => {
                        if(res.data.code == 200) {
							this.platformOptions = res.data.data;
                        }
                    }
                });
            },
			importDaoChu(){
				
			}
		},
		mounted: function() {
			this.getKcCourseList();
			this.getxlkKcColumn();
			this.attitude();
			this.platformAttritude();
			this.manager = this.$root.huasan.manager;
			if(this.$root.userInfoMsg.rootcompanyid != 0){
				this.identityShow = false
			};
//			console.log('权限按钮：',this.manager);
		}
	}
</script>

<style>
	.KcAudit {padding-bottom:100px;}
	.KcAudit .el-table td:nth-child(4)>.cell:hover {background:#f5f7fa;}
	.KcAudit .el-table .cell,.KcAudit .el-table th div,.KcAudit .el-table--border td:first-child .cell,.KcAudit .el-table--border th:first-child .cell {padding:0;text-align:center;}
	.KcAudit .el-button {border:0;padding:12px 16px;}
	.KcAudit .el-button--mini,.KcAudit .el-button--mini.is-round {padding:0;}
	.KcAudit .el-button--mini,.KcAudit .el-button--small {font-size:14px;}
	.KcAudit .el-table__row button{color: #44CEF6;}
	.KcAudit .el-table__row td:nth-child(9) button:nth-child(2){color: #0083E2;}
	.KcAudit .el-table__row td:nth-child(9) button:nth-child(3){color: #FF2D51;}
	/*.KcAudit .el-button.el-button--mini:nth-child(1) {color:#0083E2}
	.KcAudit .el-button.el-button--mini:nth-child(2) {color:#44CEF6}
	.KcAudit .el-button.el-button--mini:nth-child(3) {color:#FF2D51}*/
	.KcAudit .el-button:hover {background:none;}
</style>